import axios from "axios";
import React, { useEffect, useState } from "react";
import { useRouter } from 'next/router';
import Carousel from '@/components/common/Carousel';
import withTranslate from '@/hocs/withTranslate'
// import { useNavigate, useParams } from "react-router-dom";


const imageSrc = [
    '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
    '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
    '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',
    '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp',
];

const ArticleDetail = ({t}) => {
    const [article, setArticle] = useState({});
    const router = useRouter();
    const { id } = router.query;
    const [articles, setArticles] = useState([]);

    const currentIndex = articles.findIndex((article) => article._id === id);

    const goToArticle = (index) => {
        if (index >= 0 && index < articles.length) {
            router.push(`/news-detail?id=${articles[index]._id}`);
        }
    };

    //   if (currentIndex === -1) {
    //     return <div className="text-center text-gray-500">文章未找到</div>;
    //   }

    useEffect(() => {
        const fetchData = async () => {
            const response = await axios.get(`/api/news/idList`);
            setArticles(response.data.data);
        }
        if (id) {
            fetchData();
        }
    }, [id]);

    useEffect(() => {
        const fetchData = async () => {
            const response = await axios.post(`/api/news/detail`, { id });
            setArticle(response.data.data);
        }
        if (id) {
            fetchData();
        }
    }, [id]);


    return (
        <>
            <Carousel urls={imageSrc} />

            <div className="container mx-auto p-4">
                <div className="card bg-base-100 shadow-xl p-6">
                    <h1 className="text-3xl font-bold text-center">{article.title}</h1>
                    <p className="text-gray-500 mt-2 text-center">
                        {t('table.author')}：{article.author} |  {t('table.date')}：{new Date(article.created).toLocaleDateString()}
                    </p>
                    <div className="divider"></div>
                    <div className="prose max-w-none" dangerouslySetInnerHTML={{ __html: article.html }}></div>
                    <div className="mt-4">
                        <button className="btn btn-outline btn-primary" onClick={() => navigate("/")}>返回首页</button>
                    </div>
                    <div className="divider"></div>
                    <div className="flex justify-between">
                        <button
                            className="btn btn-outline btn-secondary"
                            onClick={() => goToArticle(currentIndex - 1)}
                            disabled={currentIndex === 0}>
                            &larr; 上一篇
                        </button>
                        <button
                            className="btn btn-outline btn-secondary"
                            onClick={() => goToArticle(currentIndex + 1)}
                            disabled={currentIndex === articles.length - 1}>
                            下一篇 &rarr;
                        </button>
                    </div>
                </div>
            </div>
        </>
    );
};

export default withTranslate(ArticleDetail);
